<template>
	<div>
		<baidu-map class="bm-view" style="height: 100%;" @ready="mapReady" :scroll-wheel-zoom="true"
			ak="pmd0WfrgPR6KeeWZCj5RxrXPqCMFX1xr">
			<bml-marker-clusterer :averageCenter="true">
				<bm-marker v-for="(item, index) in markers" :key="index" :position="{ lng: item.lon, lat: item.lat }"
					:icon="{url:item.img, size: {width: 25, height: 25}, anchor:{x: 12, y: 12}}">

					<bm-label content="智能锁1" :labelStyle="{color: 'blue', fontSize : '24px'}"
						:offset="{width: -35, height: 30}" />

				</bm-marker>
			</bml-marker-clusterer>
		</baidu-map>
	</div>

</template>

<script>
	import logo from '@/assets/images/weizhi.png'
	import {
		BaiduMap,
		BmlMarkerClusterer,
		BmLabel,
		BmMarker
	} from 'vue-baidu-map'

	export default {
		name: "index",
		components: {
			BmlMarkerClusterer,
			BaiduMap,
			BmMarker,
			BmLabel
		},
		data() {
			return {
				markers: [{
						lon: 113.032067,
						lat: 25.793589,
						// 方向K
						direction: 90,
						// 图片
						img: logo
					},
					{
						lon: 113.032067,
						lat: 25.793589,
						// 方向
						// direction: 90,
						img: logo
					}
				],
			};
		},

		created() {

		},
		methods: {
			//百度地图初始化
			mapReady({
				BMap,
				map
			}) {
				// 默认经纬度作为中心点
				this.point = new BMap.Point(113.032067, 25.793589);
				map.centerAndZoom(this.point, 15);
				this.BMap = BMap;
				this.map = map;
				// 创建BMap.Marker实例
				    const markers = this.markers.map(item => {
				        const marker = new BMap.Marker(new BMap.Point(item.lon, item.lat));
				        marker.setIcon(new BMap.Icon(item.img, new BMap.Size(20, 40)));
				        return marker;
				    });
				
				    // 使用BMapLib.MarkerClusterer创建聚合器
				    const markerClusterer = new BMapLib.MarkerClusterer(map, { markers });
				
				    // 添加点击聚合器事件
				    markerClusterer.addEventListener('click', (cluster) => {
				        const markers = cluster.getMarkers();
				        let details = markers.map((m, index) => `Marker ${index + 1}: ${m.getPosition().lng}, ${m.getPosition().lat}`).join('\n');
				        alert(`聚合中的标记详情:\n${details}`);
				    });
			}

		}
	};
</script>

<style scoped lang="scss">
	.bm-view {
		width: 100%;
		height: 100%;
		position: absolute;
	}
</style>